import React,{useState} from 'react'
import './H5.scss'
function H5() {
    const img = [
        'https://gaoding-market.dancf.com/market-operations/market/side/00aad3c2dd5e44bca654799dbe2e02a3/1734676447681.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/3d19a138ed9749b5a3d2fd102c84a9f1/1734677161645.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f26bd3a4c9e9482eb4943823102d6657/1734677323787.png?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/f1f0e7146ea04cc1b01463025dc1618f/1734677539698.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/164e94baf7c04c6db90677eed25bef20/1734677895770.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/fd39a87131ab4cf2879c75327efc692c/1734678161939.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/9dc20fe6a0924638bbdebadbdecd73e7/1734678330573.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/724f5bda18434719bf86dc0033504e08/1734678773940.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/cca207f02d3c4db5b80d30398076bb15/1734678939759.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/84b3ed0396a5449bb97770d44b2bc297/1734679306017.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp',
    'https://gaoding-market.dancf.com/market-operations/market/side/c0a9a237499a48179f2ea9151ad1ed29/1734679332675.jpg?x-oss-process=image/resize,w_332,type_6/sharpen,120/interlace,1/format,webp'
    ]
    const slideWidth = 200; // 每个工具项的宽度，可根据实际情况调整
  const [scrollLeft, setScrollLeft] = useState(0);
  const handlePrevClick = () => {
    setScrollLeft((prevScrollLeft) => Math.max(prevScrollLeft - slideWidth, 0));
  };
  const handleNextClick = () => {
    setScrollLeft((prevScrollLeft) => prevScrollLeft + slideWidth);
  };
  return (
    <div className="H5">
      <h1>邀请函 高端会议必备</h1>
      <button className="button" onClick={handlePrevClick}>
        &lt;
      </button>
      <div
        className="H5-img"
        style={{
          scrollBehavior: "smooth",
          whiteSpace: "nowrap",
          transform: `translateX(-${scrollLeft}px)`,
        }}
      >
        {img.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                width: `${slideWidth}px`,
                margin: "10px",
              }}
            >
              <img src={item} alt="Poster" />
              <p>H5</p>
            </div>
          );
        })}
      </div>
      <button className="button-next" onClick={handleNextClick}>
        &gt;
      </button>
    </div>
  )
}

export default H5
